<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>MYSQL同步后台</title>
    <link rel="stylesheet" href="/static/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">MYSQL同步后台管理</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <!--<ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="javascript:;">控制台</a></li>
            <li class="layui-nav-item"><a href="javascript:;">同步管理</a></li>
            <li class="layui-nav-item"><a href="javascript:;" onclick="loadUserPaging()">用户管理</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">子菜单一</a></dd>
                    <dd><a href="javascript:;">子菜单二</a></dd>
                    <dd><a href="javascript:;">子菜单三</a></dd>
                </dl>
            </li>
        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="/static/photo.png" class="layui-nav-img">
                    <input id="puId" type="hidden">
                    <span class="hidden-xs" id="loginUserName"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" onclick="fillMyInfo()">基本资料</a></dd>
                    <dd><a href="javascript:;" onclick="fillPwd()">修改密码</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="javascript:;" onclick="doLoginOut()">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" onclick="loadMenuPaging()">菜单管理</a></dd>
                        <dd><a href="javascript:;" onclick="loadRolePaging()">角色管理</a></dd>
                        <dd><a href="javascript:;" onclick="loadUserPaging()">用户管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">MYSQL同步</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" onclick="loadTabConfigPaging()">数据库配置</a></dd>
                        <dd><a href="javascript:;" onclick="loadTabSyncPaging()">结构同步</a></dd>
                        <dd><a href="javascript:;" onclick="loadViewSyncPaging()">视图同步</a></dd>
                        <dd><a href="javascript:;" onclick="loadFunSyncPaging()">函数同步</a></dd>
                        <dd><a href="javascript:;" onclick="loadDataSyncPaging()">数据同步</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">备用菜单</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="bd-content" id="page-com" style="padding: 15px;">
            <hr class="layui-bg-gray">
            <hr class="layui-bg-gray">
            主体内容
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © 底部固定区域
    </div>
</div>
<script src="/static/layui.js"></script>
<script src="/static/jquery-1.8.3.min.js"></script>
<script src="/static/loadUI.js"></script>

<script>
    $(function () {
        $.ajax({  "type":"get",
            "url":'/user/getCurUserInfo',
            "success":function(res){
                document.getElementById("puId").value= res.data.id;
                $('#loginUserName').html(res.data.userName);
            }
        });

        loadTabSyncPaging();

    })


    function doLoginOut() {
        $.ajax({
            type:'get',
            url:'/doLoginOut',
            success:function () {
                self.location='/';
            }
        })
    }


    function loadMenuPaging() {
        //传id,和html
        doLoadUI('page-com','sys/menu.html')
    };

    function loadRolePaging() {
        //传id,和html
        doLoadUI('page-com','sys/role.html')
    };

    function loadUserPaging() {
        //传id,和html
        doLoadUI('page-com','sys/user.html')
    };

    function loadTabConfigPaging() {
        //传id,和html
        doLoadUI('page-com','sys/tabConfig.html')
    };

    function loadTabSyncPaging() {
        //传id,和html
        doLoadUI('page-com','sys/tab/sync.html')
    };

    function loadViewSyncPaging() {
        //传id,和html
        doLoadUI('page-com','sys/view/sync.html')
    };

    function loadFunSyncPaging() {
        //传id,和html
        doLoadUI('page-com','sys/fun/sync.html')
    };

    function loadDataSyncPaging() {
        //传id,和html
        doLoadUI('page-com','sys/data/sync.html')
    };


    function doLoadUI(id, url) {
        var req = false;

        // Safari, Firefox, 及其他非微软浏览器
        if (window.XMLHttpRequest) {
            try {
                req = new XMLHttpRequest();
            } catch (e) {
                req = false;
            }
        } else if (window.ActiveXObject) {

        // For Internet Explorer on Windows
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    req = false;
                }
            }
        }

        if (req) {
        // 同步请求，等待收到全部内容
            req.open('GET', url, false);
            req.send(null);
            if (req.status == 200){
                $("#"+id).html(req.responseText);
            }else {
                $("#"+id).html('<div style="text-align: center">无此权限 或 请求出错 ...</div>');
            }

        } else {
            $("#"+id).html("对不起，你的浏览器不支持" +
                "XMLHTTPRequest 对象。这个网页的显示要求" +
                "Internet Explorer 5 以上版本, " +
                "或 Firefox 或 Safari 浏览器，也可能会有其他可兼容的浏览器存在。");
        }
    }


    function getHtml(url) {
        var req = false;

        // Safari, Firefox, 及其他非微软浏览器
        if (window.XMLHttpRequest) {
            try {
                req = new XMLHttpRequest();
            } catch (e) {
                req = false;
            }
        } else if (window.ActiveXObject) {

        // For Internet Explorer on Windows
            try {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    req = false;
                }
            }
        }

        if (req) {
        // 同步请求，等待收到全部内容
            req.open('GET', url, false);
            req.send(null);

            //console.log(req);
            if (req.status == 200){
                return req.responseText;
            }else {
                return '<div style="text-align: center">无此权限 或 请求出错 ...</div>';
            }

        } else {
            return '未获取到内容';
        }
    }


    function fillPwd() {
        layer.open({
            title:'修改密码',
            id: 'LAY_pwd',//设定一个id，防止重复弹出
            type: 1,
            area: ['350px', '350px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['修改','取消'],
            content: getHtml('/sys/user/pwd.html'),
            yes: function(index){
                layer.close(index);
                // 执行确定逻辑
                updatePwd();
            }
            ,btn2: function(index){
                layer.close(index);
            }
        });
    }

    function updatePwd() {
        let userId = $('#puId').val();
        let oldPwd = window.btoa($('#oldPwd').val());
        let newPwd = window.btoa($('#newPwd').val());
        let checkPwd = window.btoa($('#checkPwd').val());

        let url = 'user/updatePwdById';
        let params = {'userId':userId,'oldPwd':oldPwd,'newPwd':newPwd,'checkPwd':checkPwd};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                layer.msg(result.desc);
            }})
    }


    function fillMyInfo() {
        layer.open({
            title:'修改资料',
            id: 'LAY_udInfo',//设定一个id，防止重复弹出
            type: 1,
            area: ['350px', '300px'],
            shadeClose: true,
            closeBtn: 0,
            btn: ['修改','取消'],
            content: getHtml('/sys/user/info.html'),
            yes: function(index){
                layer.close(index);
                // 执行确定逻辑
                updateMyInfo();
            }
            ,btn2: function(index){
                layer.close(index);
            }
        });
    }

    function updateMyInfo() {
        let userId = $('#puId').val();
        var userName = $('#infoUserName').val();

        let url = 'user/updateOneById';
        let params = {'id':userId,'userName':userName};

        $.ajax({  "type":"post",
            "url":url,
            "data":params,
            "success":function(result){
                layer.msg(result.desc);

                if (result.errorCode == '0'){
                    $('#loginUserName').html(userName);
                }
            }
        })
    }
</script>

</body>
</html>